<template>
  <div class="content_left_sqryfb">
    <titleBox text="社区民意"></titleBox>
    <div class="content">
      <div ref="echartsRef" id="eChart" class="charts"></div>
      <div style="background-image: url('/img/myimg/bt2.png'); background-size:150px 20px; margin:10px 80px; font-size:12px; width:150px; height:20px; text-align: center;">
        近6个月诉求反映
      </div>
      <div id="lineChart" style="height: 200px; width:310px;"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue"
import * as echarts from "echarts"
import titleBox from "../mConponents/titleBox.vue"
const echartsRef = ref(null)

const initLineChart = () => {
  const dom = document.getElementById("lineChart")
  const myChart = echarts.init(dom) // 初始化echarts实例
  const option = {

  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  legend: {
    show: false
  },
  grid: {
    top: "10%",
    left: "3%",
    right: "5%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: ["2024-05", "2024-06", "2024-07", "2024-08", "2024-09", "2024-10", "2024-11"],
      axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: "rgba(219, 225, 255, 1)"
            },
            formatter: function(params) {
              let newParamsName = ""
              const paramsNameNumber = params.length
              const provideNumber = 4
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = ""
                  const start = p * provideNumber
                  const end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + "\n"
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
          }
        }
  ],
  yAxis: [
    {
      type: "value",
            splitNumber: 4,
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#BDBDBD",
                width: 1,
                type: "dotted"
              }
            },
            axisLabel: {
              // 设置y轴的文字的样式
              textStyle: {
                show: true,
                color: "#BDBDBD",
                fontSize: "12"
              }
            }
    }
  ],
  series: [
    {
      name: "分类名称1",
      type: "line",
      areaStyle: {},
      smooth: true,
      data: [12, 26, 91, 67, 39, 25, 80]
    },
    {
      name: "分类名称2",
      type: "line",
      areaStyle: {},
      smooth: true,
      data: [76, 39, 64, 98, 35, 75, 58]
    },
    {
      name: "分类名称3",
      type: "line",
      areaStyle: {},
      smooth: true,
      data: [56, 48, 85, 74, 68, 85, 26]
    }
  ]
}
myChart.setOption(option)
}

onMounted(() => {
  initLineChart()
  const dom = document.getElementById("eChart")
  const myChart = echarts.init(dom) // 初始化echarts实例
  const datas = [
          { value: 10, name: "话题类型1" },
          { value: 10, name: "话题类型2" },
          { value: 20, name: "话题类型3" },
          { value: 30, name: "话题类型4" },
          { value: 80, name: "话题类型5" },
          { value: 20, name: "话题类型6" }
        ]
  const option = {
    grid: {
        left: "0%", // 可以调整这个值来改变饼图的位置，使其靠左显示
        containLabel: true
    },
    legend: {
      left: "right",
      x: "left",
      y: "center",
      itemGap: 8,
      orient: "vertical",
      itemHeight: 10,
      itemWidth: 10,
      textStyle: {
        rich: {
          name: {
            verticalAlign: "right",
            align: "left",
            width: 50,
            fontSize: 8,
            color: "#FFFFFF"
          },
          value: {
            align: "left",
            width: 35,
            fontSize: 8,
            color: "#FFFFFF"
          },
          count: {
            align: "left",
            width: 20,
            fontSize: 8,
            color: "#FFFFFF"
          }
        },
        color: "#54bef9"
      },
      data: datas.map((item) => item.name),
      formatter: function (name) {
        let total = 0
        let tarValue
        for (let i = 0; i < datas.length; i++) {
          total += datas[i].value
          if (name === datas[i].name) {
            tarValue = datas[i].value
          }
        }
        const p = Math.round((tarValue / total) * 100)
        return (
          "{name| " + name + "}  " + "{value| " + tarValue + "个}" + "{count| " + p + "%} "
        )
      }
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"], // 定义外层和内层的半径
        avoidLabelOverlap: false,
        center: ["28%", "50%"],
        borderWidth: 10,
        borderColor: "#fff",
        data: datas,
        label: {
          show: false // 隐藏默认的标签
        }
      },
      {
            z: 100,
            type: "gauge", // 这个type类型要设置为gauge
            radius: "-50%",
            center: ["28%", "50%"],
            // 配置中间的数字的样式
            detail: {
              // 调节数字位置
              offsetCenter: [-1, 12],
              color: "#fff",
              fontSize: "14px"
            },
            pointer: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            // 中间的字和数字 数据
            data: [
              {
                value: 6,
                name: "关注话题",
                title: {
                  show: true,
                  color: "#fff",
                  fontSize: 10,
                  offsetCenter: [0, "20%"]// 配置“总风险数”的位置
                }
              }

            ]
          }
    ]
  }
  // 设置实例参数
  myChart.setOption(option)
})
</script>
<style scoped lang="less">
.content_left_sqryfb {
  margin-top: 10px;
  .content {
    padding: 10px;
    background-color: rgba(0, 26, 29, 0.8);
    width: 330px;
    // height: 150px;
    // border: 1px solid #11AFC180;
    // border-radius:5px;
    margin-top: 5px;
    // align-items: center;
    // display: flex;
    .charts {
      width: 310px;
      height: 150px;
    }
    .nan {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .nv {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
